<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        body {
            /*padding-top: 1.5rem;*/
        }

        .header {
            width: 93%;
            height: 3rem;
            padding: 0.5rem 0.8rem;
            border-bottom: 1px solid rgb(242, 242, 242, 0.5);
            line-height: 3rem;
            position: fixed;
            top:2rem;
            background-color: #fff;
        }

        .header ul {
            width: 80%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .header ul li {
            width: 30%;
            text-align: center;
            float: left;
        }

        .header ul li a {
            color: black;
            text-decoration: none;
            font-weight: bold;
        }

        #a {
            color: #40cccc;
        }
        .lines_s {
            position: absolute;
            top:3.7rem;
            left: 74%;
            border-bottom: 0.25rem solid #40cccc;
            width: 2rem;
        }
        .nav{
          width: 93%;
          padding: 0rem 0.8rem;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          padding-bottom: 1rem;
          /*overflow: hidden;*/
        }
        .nav_one{
          width: 48%;
          margin-top: 1rem;
          height: 13.5rem;
          border: 1px solid rgb(242, 242, 242, 0.5);
          box-shadow: 0 5px 10px rgb(223, 223, 223);

        }
        .one_img{
          width: 100%;
          height: 6.5rem;
          border: none;
        }
        .one_img img{
          width: 100%;
          height: 100%;
        }
    </style>
</head>

<body>
    <div class="nav" id="lists">

    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
<script type="text/javascript">
var page = 1;
var pagesize = 10;
var ok = true;
    apiready = function() {
      get_list()//获取专家课程列表
      api.addEventListener({
           　　name:'scrolltobottom',
               extra:{threshold:0}
           }, function(ret, err){
    　　　　　　get_list()
          });
    };

    function opens(id) {
      api.openWin({
          name: 'curlist',
          url: './curlist.html',
          pageParam: {
                      id: id
                  }
      });
    }
    function get_list() {
      if(ok==false){
        return false;
      }
      var html =''
      var obj = $api.byId('lists');

      api.ajax({
          url: SITE_URL+'cur_api/experts/get_list',
          method: 'post',
          data: {
              values: {
                  page: page,
                  pagesize:pagesize
              }
          }
      },function(ret, err){
          if (ret) {
            if(ret.error==200){
              if(ret.data.length){
                for (var i = 0; i < ret.data.length; i++) {
                  var dat = ret.data[i]
                  html +='<div class="nav_one" onclick="opens('+dat.id+')">'
                  html +='<div class="one_img">'
                  html +='<img src="'+dat.img_url+'" alt="">'
                  html +='</div>'
                  html +='<h5 style="margin-top:0.5rem;padding-left:0.3rem">'+dat.cur_name+'</h5>'
                  html +='<p style="color:#ccc;font-size:0.8rem;margin-top:0.5rem;margin-left:0.3rem">'+dat.cur_title+'</p>'
                  html +='<p style="color:red;font-size:1.2rem;margin-top:0.8rem;float:right;margin-right:0.3rem">￥'+dat.price+'</p>'
                  html +='</div>'
                }
                $api.append(obj, html);
                page+=1
              }
            }else{
              ok = false
              msgcode('暂无更多课程')
            }
              //alert( JSON.stringify( ret ) );
          } else {
            msgcode('请检查网络连接')
              //alert( JSON.stringify( err ) );
          }
      });

    }
</script>

</html>
